<template>
  <!--新碟首发设计-->
  <div class="newDisc">
    <div class="newDisc_title">
      新 碟 首 发
    </div>
    <Album :num="num"></Album>
    <div class="more" @click="$router.replace('/newalbum')">更多></div>
  </div>
</template>

<script>
  import Album from '@/components/Album/Album'
  export default {
    name: "RecommendNewAlbum",
    data(){
      return{
        num:9
      }
    },
    components:{
      Album,
    }
  }
</script>

<style scoped lang="less">
   .newDisc{width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);text-align: center;margin: 0 auto;position:relative;}
   .newDisc .more{position: absolute;right: 82px;top:116px;}
   .newDisc .more:hover{color: #31c27c;cursor: pointer}
   .newDisc .newDisc_title{font-size: 30px;font-weight: bolder;padding-top: 50px;}
   .newDisc .newDisc_type{position: relative;width: 1200px;margin: 0 auto}
   .newDisc .newDisc_type li{display: inline-block;margin: 35px 25px;}
   .newDisc .newDisc_type li.select{color: #31c27c;}
   .newDisc .newDisc_type li:hover{cursor: pointer;color: #31c27c;}
    .newDisc .newDisc_info li{font-size:14px;display: inline-block;width: 222px;margin-right: 17px;position: relative;}
    .newDisc .newDisc_info li:nth-child(5n){margin-right: 0px;}
    .newDisc .newDisc_info li img{width: 222px;height: 222px;display: block;cursor: pointer;transition: all 0.6s;}
    .newDisc .newDisc_info li .name{text-align: left;margin-top: 19px;margin-bottom: 10px;}
    .newDisc .newDisc_info li .singer{text-align: left;margin-bottom: 32px;color: #999;}
    .newDisc .newDisc_info li .name:hover{cursor: pointer;color: #31c27c;}
    .newDisc .newDisc_info li .singer span:hover{cursor: pointer;color: #31c27c;}
    .newDisc .newDisc_info li .img:hover::after{content: '';display: block;width: 222px;height: 222px;position: absolute;top:0;left: 0;background: #000;opacity: 0.2;}
    .newDisc .newDisc_info li .img{width: 222px;height: 222px;overflow: hidden;}
    .newDisc .newDisc_info li .img:hover img{transform: scale(1.2);}
    .newDisc .newDisc_info li .icon{position: absolute;z-index: 1;background: white;border-radius: 50%;height:40px;width: 40px;text-align: center;line-height: 40px;opacity: 0;transition: all 1s;top:30%;right: 0;left: 0;margin: 0 auto}
    .newDisc .newDisc_info li .img:hover .icon{opacity: 1;transform: scale(1.3);}
    .newDisc .newDisc_info li .iconfont{font-size: 25px;color: #545454;margin-left: 4px;margin-top: 3px;display: inline-block;}
</style>
